<!-- test fred -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C2E - PHONE</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<link rel="stylesheet" href="themes/icons/icons.css.php" />
<link rel="stylesheet" href="themes/touchwin/touchwin.css.php" />
<script src="js/prototype/prototype.js"></script>
<script src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/touchwin/extends.js?lang=fr"></script>
<script src="js/jquery/jquerymobile.js"></script>

<!--<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script>
// Note that using Google Gears requires loading the Javascript
// at http://code.google.com/apis/gears/gears_init.js

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();



function initialize() {
  var myOptions = {
	zoom: 6,
	mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
	browserSupportFlag = true;
	navigator.geolocation.getCurrentPosition(function(position) {
	  initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
	  map.setCenter(initialLocation);
	}, function() {
	  handleNoGeolocation(browserSupportFlag);
	});
  // Try Google Gears Geolocation
  } else if (google.gears) {
	browserSupportFlag = true;
	var geo = google.gears.factory.create('beta.geolocation');
	geo.getCurrentPosition(function(position) {
	  initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
	  map.setCenter(initialLocation);
	}, function() {
	  handleNoGeoLocation(browserSupportFlag);
	});
  // Browser doesn't support Geolocation
  } else {
	browserSupportFlag = false;
	handleNoGeolocation(browserSupportFlag);
  }
  
  function handleNoGeolocation(errorFlag) {
	if (errorFlag == true) {
	  alert("Geolocation service failed.");
	  initialLocation = newyork;
	} else {
	  alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
	  initialLocation = siberia;
	}
	map.setCenter(initialLocation);
  }
}
</script>-->
<script>
try{
Extends.ready(function(){
	//initialize();
	
	
	$J('#popup').hide(); 
	$J('#menu').context.hidden = true;
	//$J('#back').hide();
	try{
	$J('#menu').click(function(){
		$J('#menu').removeClass('button-selected');
		if($J('#menu').context.hidden){
			$J('#popup').slideDown('fast');
			$J('#menu').addClass('button-selected');
			
			$J('.large-button').fadeOut('fast');		
			
		}else{
			$J('#popup').slideUp('fast');
			$J('.large-button').fadeIn('fast');
		}
		$J('#menu').context.hidden = !$J('#menu').context.hidden;
	})
	
	$J('#switch').context.dragging = false;
	
	$J(document).bind("touchmove mousemove", function(event){
		if(this.dragging){//stop event
						
			var width = 	$J('#switch').width();
			var position = 	$J('#switch').offset().left + (width / 2);
			
			//$J('sw-cursor').focus();
			if(event.pageX < position){
				$('switch').className = 'switch-button';//removeClass('swicth-yes');
				return false;
			}
			
			$J('#switch').addClass('switch-yes');
			return false;	
		}
	}.bind($J('#switch').context))
	
	$J('#switch').bind('touchstart mousedown', function(event){
		this.dragging = true;	
	}.bind($J('#switch').context));
	
	$J(document).bind('touchend mouseup', function(event){
		this.dragging = false;	
	})
	
	$J('#switch').bind('touchend mouseup', function(event){
		var width = 	$J('#switch').width();
		var position = 	$J('#switch').offset().left + (width / 2);
			
		//$J('sw-cursor').focus();
		if(event.pageX < position){
			$('switch').className = 'switch-button';//removeClass('swicth-yes');
		}else{
			$J('#switch').addClass('switch-yes');
		}
	});
	
	}catch(er){alert(er)}
	
	///****panel****/
	//$J('#panel2').hide();
	var carroussel = $J('#carroussel');
	carroussel.options = {
		x:			0,
		start_x: 	0,
		end_x:		0,
		dragging: 	false	
	}
	
	$('onglet1').addClassName('large-button-selected');
	
	$J('#carroussel').bind("touchstart mousedown", function(event){
		carroussel.options.dragging = true;
		carroussel.options.start_x = event.pageX;
	});
	
	
	$J('#carroussel').bind("touchmove mousemove", function(event){
		if(carroussel.options.dragging){
			carroussel.options.end_x = event.pageX;
			//$('carroussel').setStyle('left: -' +(carroussel.options.x - ($J("#body").position().left - event.pageX)) + 'px');
			return false;
		}
	});
	
	$J(document).bind("touchend mouseup", function(event){
		
		if(carroussel.options.dragging){
			
			
		
			if(Math.abs(carroussel.options.start_x - carroussel.options.end_x) > 100){
				var onglet = Math.round(carroussel.options.x / 320);
				$J('.large-button')[onglet].removeClassName('large-button-selected');
				
				if(carroussel.options.start_x - carroussel.options.end_x< 0){
					carroussel.options.x -= 320;
				}else{
					carroussel.options.x += 320;
				}
				if(carroussel.options.x < 0) {
					carroussel.options.x = 0;
				}
				if(carroussel.options.x > 320 * (3 -1)) carroussel.options.x = 320 * (3 - 1);
				
			}

 			$J('#carroussel').animate({
				left: -carroussel.options.x
			}, 500);
			
			onglet = Math.round(carroussel.options.x / 320)
			
			$J('.large-button')[onglet].addClassName('large-button-selected');
		}
		
		carroussel.options.dragging = false;
	});
	
	$J('#onglet1').click(function(){
		var onglet = Math.round(carroussel.options.x / 320);
		$J('.large-button')[onglet].removeClassName('large-button-selected');
		
		$J('#carroussel').animate({
			left: carroussel.options.x = 0
		}, 500);
		
		$('onglet1').addClassName('large-button-selected');
	});
	
	$J('#onglet2').click(function(){
		var onglet = Math.round(carroussel.options.x / 320);
		$J('.large-button')[onglet].removeClassName('large-button-selected');
		
		$J('#carroussel').animate({
			left: - (carroussel.options.x = 320)
		}, 500);
		
		$('onglet2').addClassName('large-button-selected');
	});
	
	$J('#onglet3').click(function(){
		var onglet = Math.round(carroussel.options.x / 320);
		$J('.large-button')[onglet].removeClassName('large-button-selected');
		
		$J('#carroussel').animate({
			left: - (carroussel.options.x = 640)
		}, 500);
		
		$('onglet3').addClassName('large-button-selected');
	})
	/*
	$J('#event').click(function(){
		
		$J('#event').addClass('large-button-selected');
		$J('#galery').removeClass('large-button-selected');
		
		$J('#panel2').slideUp('fast', function(){
			$J('#panel2').hide();
			$J('#panel1').show();
			$J('#panel1').slideDown('slow');
		});
		
		
	})
	$J('#galery').click(function(){
		
		$J('#event').removeClass('large-button-selected');
		$J('#galery').addClass('large-button-selected');
		
		$J('#panel1').slideUp('fast', function(){
			$J('#panel1').hide();
			$J('#panel2').show();
			$J('#panel2').slideDown('slow');
		});
		
	})*/
	
	
	
 })
}catch(er){alert(er)}
</script>
</head>
<body style="width:320px; height:480px;position:absolute; left:50%; margin-left:-160px">
<div class="tab-control">
	<div class="header" role="header">
    	<span class="button back-button" id="back">
        	<div class="back-f"></div>Retour
        </span>
        <span class="button" id="menu">
        	Menu
        </span>
        <span class="large-button" id="onglet1">
        	<div class="icon icon-event">
            	
            </div>
            <div class="text-button">
            	Evènement
            </div>
        </span>
        <span class="large-button" id="onglet2">
        	<div class="icon icon-location">
            
            </div>
            <div class="text-button">
            	Localisation
            </div>
        </span>
        <span class="large-button" id="onglet3">
        	<div class="icon icon-galery">
            </div>
            <div class="text-button">
            	Galerie
            </div>
        </span>
        <span class="large-button">
        	<div class="icon icon-message">
            
            </div>
            <div class="text-button">
            	Messages
            </div>
        </span>
    </div>
    <div class="body" role="body" id="body">
        
    	<div class="popup" id="popup">
        
        	<span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-date-48">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Evènements
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-maps">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Localisation
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-picture">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Galerie
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-messenger">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Messenger
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-fries">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Restaurants
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-media">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Vidéos
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-administrator">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Conférenciers
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-documentinfo">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Infos pratiques
                </div>
            </span>
            
            <span class="app-button">
                <div class="content-icon-button">
                	<div class="icon icon-text-edit">
                    </div>
                    <div class="mask-button">
                    </div>
                </div>
                <div class="app-text">
                    Documents
                </div>
            </span>
            
		</div>
        <div class="carroussel" id="carroussel">
            <div class="panel" id="panel1">
                
                <h1>Jouer et Philosopher
                <p>Intervenant(s) : M. Didier Moreau</p>
                </h1>
                <div style="padding-bottom:5px;">
                    <span class="icon-button icon-facebook"></span>
                    <span class="icon-button icon-twitter"></span>
                    <span class="icon-button icon-linkedin"></span>
                    <span class="icon-button icon-myspace"></span>
                </div>
                
                <h2 class="split-icon icon-map">Rendez-vous</h2>
                <p class="note">
                    Campus de poitier Batiment B Stand 1.B
                </p>
                <h2 class="split-icon icon-date-32">Horaires</h2>
                <p class="note">
                    <table class="table-data" style="margin-bottom:5px">
                    <tbody>
                        <tr>	
                            <th style="width:100px">Début le</th><td>24/07/2011 à 11h 00</td>
                        </tr>
                        <tr>	
                            <th>Fin le</th><td>24/07/2011 à 13h 30</td>
                        </tr>
                    </tbody>
                    </table>
                </p>
                <table><tr><td width=160><h2 class="split-icon icon-misc">Participer ? </h2></td>
                <td>
                <span class="switch-button" id="switch"><span class="part-yes">Oui</span><span class="part-no">Non</span><div class="cursor" id="sw-cursor"></div></span>
                </td>
                </tr>
                </table>
            </div>
            <div class="panel" id="panel2">
                <h1>Jouer et Philosopher
                <p>Intervenant(s) : M. Didier Moreau</p>
                </h1>
                <div style="padding-bottom:5px;">
                    <span class="icon-button icon-facebook"></span>
                    <span class="icon-button icon-twitter"></span>
                    <span class="icon-button icon-linkedin"></span>
                    <span class="icon-button icon-myspace"></span>
                </div>
                
                <div id="map_canvas" style="height:330px; width:320px; position:absolute;left:0px;">
                </div>
                
            </div>
            <div class="panel" id="panel3">
                <h1>Jouer et Philosopher
                <p>Intervenant(s) : M. Didier Moreau</p>
                </h1>
                <div style="padding-bottom:5px;">
                    <span class="icon-button icon-facebook"></span>
                    <span class="icon-button icon-twitter"></span>
                    <span class="icon-button icon-linkedin"></span>
                    <span class="icon-button icon-myspace"></span>
                </div>
                <div class="scrollpanel" style="position:absolute; left:0px; width:320px; max-height:320px; overflow:hidden;text-align:center;padding-top:5px">
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
                    <div class="picture-case">
                    </div>
               	</div>
            </div>
        </div>
    </div>
    
</div>


</body>
</html>
